import React, { useState, useEffect, useRef } from "react";
import { message } from "antd";
import { PageContainer, FooterToolbar } from "@ant-design/pro-layout";
import ProForm, {
  ProFormDigit,
  ProFormRadio,
  ProFormDependency,
  ProFormText,
} from "@ant-design/pro-form";
import { fetchInfo, addOrUpdate } from "@/api/companyAddress";
import { ProCard } from "@ant-design/pro-components";

export default () => {
  const formRef = useRef();

  const getInfo = async () => {
    const res = await fetchInfo();
    if (res.data) {
      formRef.current.setFieldsValue(res.data);
    }
  };
  useEffect(() => {
    getInfo();
  }, []);
  const handleAddOrUpdate = async (fields) => {
    const postData = {
      ...fields,
    };
    const res = await addOrUpdate(postData);
    if (res.data) {
      message.success("提交成功");
    }
  };
  return (
    <PageContainer>
      <ProCard>
        <ProForm
          labelCol={{
            span: 2,
          }}
          wrapperCol={{
            span: 8,
          }}
          layout="horizontal"
          formRef={formRef}
          submitter={{
            render: (_, dom) => <FooterToolbar>{dom[1]}</FooterToolbar>,
          }}
          onFinish={async (values) => {
            return await handleAddOrUpdate(values);
          }}
          initialValues={{
            timeLimit: 1,
          }}
        >
          <ProFormText name="id" hidden />
          <ProFormText
            label="收货人"
            name="name"
            rules={[
              { required: true, message: "请输入收货人" },
              {
                max: 50,
                message: "最长为50位",
              },
            ]}
          />
          <ProFormText
            label="手机号码"
            name="mobile"
            placeholder="请输入手机号码"
            rules={[
              {
                required: true,
                message: "请输入手机号码",
              },
              {
                pattern:
                  /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
                message: "手机号码格式错误",
              },
            ]}
          />
          <ProFormText
            label="收货地址"
            name="address"
            rules={[
              { required: true, message: "请输入收货地址" },
              {
                max: 100,
                message: "最长为100位",
              },
            ]}
          />
        </ProForm>
      </ProCard>
    </PageContainer>
  );
};
